<template>
    <div class="afteraddress">
        <store-leftmenus active="2"></store-leftmenus>
        <div class="afteraddress-main">
            <Breadcrumb :title=title></Breadcrumb>
            <div class="afteraddress-main_content">
                <div>
                    <div class="contenttitle">
                        售后地址
                    </div>
                    <div class="afteraddress-main_contentFirst">
                      <div class="main_contentFirst-header">
                        <el-button
                        type="primary"
                              @click="addressAdd(-1)">添加
                          </el-button>
                      </div>
                      <el-table
                        :data="tableData"
                        border
                        style="width: 100%"
                        v-loading="loading">
                        <el-table-column
                          prop="address"
                          label="地址"
                          width="250">
                          <template slot-scope="scope">
                              <span v-if="scope.row.seatName">
                                {{scope.row.provinceName}}省{{scope.row.cityName}}市{{scope.row.seatName}}(县/区) {{scope.row.address}}
                              </span>
                              <span v-else>
                                {{scope.row.provinceName}}市{{scope.row.cityName}}(县/区) {{scope.row.address}}
                              </span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="addTime"
                          label="添加时间">
                        </el-table-column>
                        <el-table-column
                          prop="isDefault"
                          label="是否默认"
                          width="160">
                          <template slot-scope="scope">
                              <span v-if="scope.row.isDefault === 1">默认地址</span>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作"
                        width="160">
                                <template slot-scope="scope">
                                    <el-button
                                        size="mini"
                                        @click="addressEdit(scope.row)">编辑</el-button>
                                    <el-button
                                        size="mini"
                                        type="danger"
                                        @click="addressDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                      </el-table>
                      <el-pagination
                            class="paging"
                            align="right"
                            @current-change="handleCurrentChange"
                            :current-page.sync="current"
                            hide-on-single-page
                            :page-size="pageSize"
                            layout="prev, pager, next, jumper"
                            :total="count">
                        </el-pagination>
                      <el-dialog title="售后地址" :visible.sync="dialogVisible" width="50%">
                          <span>
                              <div class="main_contentFirst-input">
                                <p class="input-p">地址：</p>
                                <div class="address-select">
                                    <el-select v-model="customerForm.province" placeholder="省份" @change="selectProvince" style="width:200px">
                                        <el-option
                                        v-for="province in cityList"
                                        :key="province.id"
                                        :label="province.name"
                                        :value="province.id"
                                        ></el-option>
                                    </el-select>
                                    <el-select v-model="customerForm.city" placeholder="市级" @change="selectCity" style="width:200px">
                                        <el-option
                                        v-for="city in citys"
                                        :key="city.id"
                                        :label="city.name"
                                        :value="city.id"
                                        ></el-option>
                                    </el-select>
                                    <el-select v-model="customerForm.country" placeholder="县级" style="width:200px" :disabled="disable">
                                        <el-option
                                        v-for="county in countys"
                                        :key="county.id"
                                        :label="county.name"
                                        :value="county.id"
                                        ></el-option>
                                    </el-select>
                                </div>
                              </div>
                              <div class="main_contentFirst-input">
                                <p class="input-p">详细地址：</p>
                                <el-input v-model="address" placeholder="请输入内容"></el-input>
                              </div>
                              <div class="main_contentFirst-input">
                                <div class="main_contentFirst-input">
                                  <p class="input-p">收件人：</p>
                                  <el-input v-model="addressee" placeholder="请输入内容"></el-input>
                                </div>
                                <div class="main_contentFirst-input" style="marginLeft:25px;">
                                  <p class="input-p" style="minWidth:50px;">电话：</p>
                                  <el-input v-model="phone" placeholder="请输入内容"></el-input>
                                </div>
                              </div>
                              <div class="main_contentFirst-input">
                                <el-checkbox v-model="isDefault">设置为默认地址</el-checkbox>
                              </div>
                          </span>
                          <span slot="footer">
                              <el-button type="primary" @click="sendOver">提 交</el-button>
                          </span>
                      </el-dialog>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import StoreLeftmenus from '@/views/components/StoreLeftmenus'
import Breadcrumb from '@/views/components/Breadcrumb'
import { mapState } from 'vuex'
import { getTime } from '@/utils/service.js'
export default {
  data () {
    return {
      account:'',
      inputMaxL:null,
      title: {
        group: '店铺管理',
        name: '售后地址管理'
      },
      tableData: [],
      dialogVisible: false,
      customerForm: {
        province: '',
        city: '',
        country: ''
      },
      count: null,
      current: 1,
      pageSize: 10,
      cityList: [],
      countys: [],
      citys: [],
      disable: false,
      address: '',
      isDefault: false,
      loading: false,
      adresState: null,
      addressee: '',
      phone: '' 
    }
  },
  components: {
    StoreLeftmenus,
    Breadcrumb
  },
  created () {
    this.findAllArea()
  },
  methods: {
    async listStoreRefund () {
      // 获取地址列表
      this.loading = true
      let obj = {
        page: this.current,
        storeId: this.print.id,
        isDelete: 0
      }
      const res = await this.axios.listStoreRefund(obj)
      this.loading = false
      res.data.data.results.map(el => {
        el.addTime = getTime(el.addTime)
      })
      this.tableData = res.data.data.results
      this.count = parseInt(res.data.data.count)
    },
    async findAllArea () {
      // 获取省市区
      this.loading = true
      const res = await this.axios.findAllArea()
      this.cityList = res.data.data
      this.listStoreRefund()
    },
    async addAddress () {
      // 新增地址
      if(this.addressee){
        if(this.phone){
          let provinceName; let cityName; let seatName = ''
          this.cityList.map(el => {
            if (el.id === this.customerForm.province) {
              provinceName = el.name
            }
            el.regionDtoList.map(el1 => {
              if (el1.id === this.customerForm.city) {
                cityName = el1.name
              }
              if (el1.regionDtoList.length) {
                el1.regionDtoList.map(el2 => {
                  if (el2.id === this.customerForm.country) {
                    seatName = el2.name
                  }
                })
              }
            })
          })
          let obj = {
            address: this.address,
            provinceId: this.customerForm.province,
            cityId: this.customerForm.city,
            seatId: this.customerForm.country || null,
            provinceName,
            cityName,
            seatName,
            isDefault: this.isDefault ? 1 : 0,
            // uid: this.print.uid,
            storeId: this.print.id,
            addressee:this.addressee,
            phone: this.phone
          }
          const res = await this.axios.addStoreRefund(obj)
          if (res.data.code === 200) {
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 2000,
              onClose: () => {
                this.dialogVisible = false
                this.listStoreRefund()
              }
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
      } else {
          this.$message({
            message: '联系电话不能为空',
            type: 'warning'
          })
        }
      } else {
        this.$message({
            message: '收件人不能为空',
            type: 'warning'
          })
      }
    },
    async editStoreRefund () {
      // 更新地址
      if(this.addressee){
        if(this.phone){
          let provinceName; let cityName; let seatName = ''
          this.cityList.map(el => {
            if (el.id === this.customerForm.province) {
              provinceName = el.name
            }
            el.regionDtoList.map(el1 => {
              if (el1.id === this.customerForm.city) {
                cityName = el1.name
              }
              if (el1.regionDtoList.length) {
                el1.regionDtoList.map(el2 => {
                  if (el2.id === this.customerForm.country) {
                    seatName = el2.name
                  }
                })
              }
            })
          })
          let obj = {
            address: this.address,
            provinceId: this.customerForm.province,
            cityId: this.customerForm.city,
            seatId: this.customerForm.country || null,
            provinceName,
            cityName,
            seatName,
            isDefault: this.isDefault ? 1 : 0,
            id: this.adresState,
            storeId: this.print.id,
            addressee: this.addressee,
            phone: this.phone
          }
          const res = await this.axios.editStoreRefund(obj)
          if (res.data.code === 200) {
            this.$message({
              message: '修改成功',
              type: 'success',
              duration: 2000,
              onClose: () => {
                this.dialogVisible = false
                this.listStoreRefund()
              }
            })
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        } else {
          this.$message({
            message: '联系电话不能为空',
            type: 'warning'
          })
        }
      } else {
        this.$message({
            message: '收件人不能为空',
            type: 'warning'
          })
      }
    },
    async deleteStoreRefund (id) {
      //  删除地址
      let obj = {
        id
      }
      const res = await this.axios.deleteStoreRefund(obj)
      if (res.data.code === 200) {
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 2000,
          onClose: () => {
            this.listStoreRefund()
          }
        })
      } else {
        this.$message({
          message: res.data.message,
          type: 'warning'
        })
      }
    },
    addressDelete (row) {
      this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteStoreRefund(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    addressAdd (adresState) {
      // 点击打开新增地址弹窗
      this.adresState = adresState
      this.dialogVisible = true
      this.address = ''
      this.customerForm = {
        province: '',
        city: '',
        country: ''
      }
      this.isDefault = false
    },
    addressEdit (row) {
      // 点击打开修改地址弹窗
      this.dialogVisible = true
      this.adresState = row.id
      this.address = row.address
      this.customerForm = {
        province: row.provinceId,
        city: row.cityId,
        country: row.seatId
      }
      this.isDefault = !!row.isDefault
      this.selectCity1()
    },
    sendOver () {
      // 提交新增或修改
      if (this.adresState === -1) {
        this.addAddress()
      } else {
        this.editStoreRefund()
      }
    },
    handleCurrentChange (val) {
      // 改变当前页码重新获取数据
      this.current = val
      this.listStoreRefund()
    },
    selectProvince () {
      // 选中省份事件
      this.customerForm.city = ''
      this.customerForm.country = ''
      this.citys = []
      this.countys = []
      let province = this.cityList.filter(item => {
        return item.id === this.customerForm.province
      })
      this.citys = province[0].regionDtoList
    },
    selectCity () {
    // 选中城市
      this.customerForm.country = ''
      this.countys = []
      let city = this.citys.filter(item => {
        return item.id === this.customerForm.city
      })
      this.countys = city[0].regionDtoList
      if (!this.countys.length) {
        this.disable = true
      } else {
        this.disable = false
      }
    },
    selectCity1 () {
      // 初始化省市县
      if (this.cityList.length && this.customerForm.province) {
        let province = this.cityList.filter(item => {
          return item.id === this.customerForm.province
        })
        this.citys = province[0].regionDtoList
        let city = this.citys.filter(item => {
          return item.id === this.customerForm.city
        })
        this.countys = city[0].regionDtoList
        if (!this.countys.length) {
          this.disable = true
          this.customerForm.country = ''
        } else {
          this.disable = false
        }
      }
      if(!this.customerForm.country){
        this.customerForm.country= ''
        this.disable = true
      }
    }
  },
  computed: {
    ...mapState({
      print: state => state.print.all
    })
  }
}
</script>

<style lang="scss" scoped>
.afteraddress{
    display: flex;
    justify-content: center;
    .afteraddress-main{
      width: 960px;
        background-color: #fff;
        padding: 10px;
        .afteraddress-main_content{
            border:1px solid rgba(229, 230, 234, 1);
            border-top: 0;
            margin: 15px 0;
            .contenttitle{
                box-sizing: border-box;
                padding: 10px;
                line-height: 28px;
                font-weight: bold;
                height: 50px;
                background-color: rgba(245, 245, 245, 1);
                border-top: 2px solid rgba(176, 184, 184, 1);
            }
            .afteraddress-main_contentFirst{
                padding-left:10px;
                padding-right:10px;
                padding-bottom: 20px;
                .main_contentFirst-header{
                  padding: 10px 0;
                }
                .main_contentFirst-input{
                    display: flex;
                    margin: 15px 0;
                    .input-p{
                        min-width: 80px;
                        line-height: 40px;
                    }
                    .address-select{
                        /deep/ .el-select+.el-select{
                            margin-left: 10px;
                        }
                    }
                }
            }
        }
        .afteraddress-foot{
            padding: 20px;
            display: flex;
            justify-content: center;
            /deep/ .el-button{
                min-width: 100px;
                border-radius: 0;
            }
            /deep/ .el-button--primary.is-active, .el-button--primary:active{
                 background-color: rgb(4, 153, 143);
            }
            /deep/ .el-button--primary{
                background-color: rgba(0, 186, 173, 1);
                border-color:rgba(0, 186, 173, 1);
            }
        }
    }
    /deep/ .el-dialog__footer{
      text-align: center;
    }
}
</style>
